<template>
	<view class="container">
		<view class="header uni-flex uni-row flex-between  header-nav nav-shadow">
			<uni-nav-bar title="系统消息">
				<template slot='left' >
					<view class="flex width-100">
						<i class='iconfont iconfanhui' link @click='Back()'></i>
					</view>
				</template>
			</uni-nav-bar>
		</view>
		<view class="position-r-top">
			<view class="message " v-if="messageList.length">
				<view class="">
					<uni-list-item v-for="item in messageList"
								   :key="item.noticeId" 
								   :title="item.noticeTitle || ' '" 
								   :note="item.noticeContent || ' '"
									class="message-list "
									link
									@click="readMessage(item)">
									<view class="right-badge" slot="footer">
										<view class="margin-r-5">{{item.updateTime}}</view>
										<view :class="{'badge-l':item.readStatus == 0,'border-r50':item.readStatus == 0}" class="scale-6">
										</view>
									</view>
					</uni-list-item>
				</view>
				<!-- <uni-swipe-action>
				    <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange($event, index)">
				        <view >item1</view>
				    </uni-swipe-action-item>
				    <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange($event, index)">
				        <view>item2</view>
				    </uni-swipe-action-item>
				    <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange($event, index)">
				        <view>item3</view>
				    </uni-swipe-action-item>
				</uni-swipe-action> -->
				<view v-show="showLoading">
					<uni-load-more :status="more"></uni-load-more>
				</view>
			</view>
			<view v-else class="nodata">
				<text>暂无消息</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {message} from '@/common/api/profile.js'
	export default {
		data() {
			return {
				messageList:[],
				page:1,
				size:20,
				showLoading:false,
				more:'！',
				smsMessage :{
					userPhoneList:[
						{
							userId:"",
							phone:""
						}
					]
				}
			}
		},
		onLoad() {
			this.getMessage();
		},
		onPullDownRefresh() {
			console.log(123);
			setTimeout( () => {
				this.page = 1;
				this.messageList = [];
				this.showLoading=false;
				this.getMessage();
			    uni.stopPullDownRefresh();
				console.log('success')
			        }, 1000);
		},
		onReachBottom(){
			console.log(111)
			if(this.messageList.length < this.page * this.size) return this.showLoading = true;
				this.page+=1;
				this.getMessage();
		},
		methods: {
			getMessage(){
				message(this.page,this.size).then( res => {
					if(res.code === "20000"){
						this.messageList = this.messageList.concat(res.data.records);
					}
				})
			},
			readMessage(data){
				uni.navigateTo({
					url:'/pages/Personal/Message/MessageDetail/MessageDetail?detailData=' + JSON.stringify(data)
				})
			},
			Back(){
				uni.switchTab({
					url:'/pages/Personal/Personal'
				})
			}
		}
	}
</script>

<style>
.container{background-color: #eee;}
.message-list{height: 70px;}
.message-list /deep/ .uni-badge {margin-left: 5px!important;transform: scale(0.5,0.5);color: transparent;}
.message-list /deep/ .uni-list-item__content-note,.message-list /deep/ .uni-list-item__content-title{text-overflow: ellipsis;white-space: nowrap;height: 50%;}
.message-list /deep/ .uni-list-item__content-title{font-weight: bold;}
</style>
